<template>
  <div class="content" style="min-height: 100vh;">
    <HomeHead :type="3" />
    <div class="tabBox">
      <div class="flex_between" style="margin-left:-8px;">
        <div class="col flex_1" v-for="(i, idx) in time_list" @click="timeLabelChange(i, idx)" :class="{cur: time_idx == idx}">{{ i.label }}</div>
      </div>
    </div>
    <div class="calendarBox flex_center" @click="datesShow = true">
        <div class="flex_1 flex_center">{{ formatDate(dates[0]) }}</div>
        <img style="height:5px;margin:0 5px;" src="../../assets/arr_right.png"/>
        <div class="flex_1 flex_center">{{ formatDate(dates[1]) }}</div>
    </div>
    <div class="normalBox">
      <i class="i_line"></i>
      <i class="i_jiao i_j_t_l"></i>
      <i class="i_jiao i_j_t_r"></i>
      <i class="i_jiao i_j_b_l"></i>
      <i class="i_jiao i_j_b_r"></i>
      <div class="title flex_start">
        <img src="../../assets/i_tit_left.png"/>
        <div class="inner">近{{time_list[time_idx].label}}数据统计</div>
        <img src="../../assets/i_tit_right.png"/>
      </div>
      <img class="tit_bott" src="../../assets/tit_bottom.png"/>
      <div class="dataBox flex_start flex_wrap">
        <div class="item" v-for="i in center_topst.ele">
          <div class="_h3">{{i.number}}</div>
          <div class="_p">{{i.name}}(kWh)</div>
        </div>
        <div class="item" v-for="i in center_topst.water">
          <div class="_h3">{{i.number}}</div>
          <div class="_p">{{i.name}}(t)</div>
        </div>
      </div>
    </div>
    <div class="normalBox">
      <i class="i_line"></i>
      <i class="i_jiao i_j_t_l"></i>
      <i class="i_jiao i_j_t_r"></i>
      <i class="i_jiao i_j_b_l"></i>
      <i class="i_jiao i_j_b_r"></i>
      <div class="title flex_start">
        <img src="../../assets/i_tit_left.png"/>
        <div class="inner">近{{time_list[time_idx].label}}数据同比能耗(kWh)用水(t)</div>
        <img src="../../assets/i_tit_right.png"/>
      </div>
      <img class="tit_bott" src="../../assets/tit_bottom.png"/>
      <div class="selectTab flex_start">
        <div class="item flex_1" :class="{cur: data_yoy_c == 'day'}" @click="data_yoy_c_change('day')">以天为单位</div>
        <div class="item flex_1" :class="{cur: data_yoy_c == 'week'}" @click="data_yoy_c_change('week')">以周期为单位</div>
      </div>
      <div class="scrollTbale" style="overflow-x:auto;width:100%;">
        <table class="recordList" style="width:auto;">
          <tr>
            <!-- <th class="flex_center">日期<i class="i_sort i_top"></i></th> -->
            <th v-for="i in data_yoy_head">{{i}}</th>
          </tr>
          <tbody class="tableBody">
            <tr v-for="i in data_yoy_data">
              <td v-for="j in i">
                {{ j }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="normalBox">
      <i class="i_line"></i>
      <i class="i_jiao i_j_t_l"></i>
      <i class="i_jiao i_j_t_r"></i>
      <i class="i_jiao i_j_b_l"></i>
      <i class="i_jiao i_j_b_r"></i>
      <div class="title flex_start">
        <img src="../../assets/i_tit_left.png"/>
        <div class="inner">近{{time_list[time_idx].label}}报警次数统计</div>
        <img src="../../assets/i_tit_right.png"/>
      </div>
      <img class="tit_bott" src="../../assets/tit_bottom.png"/>
      <!--内容开始-->
      <div class="totalData flex_start flex_wrap">
        <div class="item flex_start" v-for="i in area_alarm_st">
          <img class="i_item" src="../../assets/i_data.png"/>
            <div class="flex_1">
              <div class="_h3">{{ i.number }}</div>
              <div class="_p">{{i.label}}</div>
            </div>
        </div>
      </div>
      <!--内容结束-->
    </div>
    <div class="normalBox">
      <i class="i_line"></i>
      <i class="i_jiao i_j_t_l"></i>
      <i class="i_jiao i_j_t_r"></i>
      <i class="i_jiao i_j_b_l"></i>
      <i class="i_jiao i_j_b_r"></i>
      <div class="title flex_start">
        <img src="../../assets/i_tit_left.png"/>
        <div class="inner">近{{time_list[time_idx].label}}数据统计</div>
        <img src="../../assets/i_tit_right.png"/>
      </div>
      <img class="tit_bott" src="../../assets/tit_bottom.png"/>
      <div class="recordList">
        <div class="col listTit flex_start">
          <div class="item flex_center flex_1">日期</div>
          <div class="item flex_center flex_1">报警类型</div>
          <div class="item flex_center width_20">报警次数</div>
        </div>
        <div class="col flex_start" v-for="i in alarm_list">
          <div class="item flex_center flex_1">{{i.date}}</div>
          <div class="item flex_center flex_1">{{i.message}}</div>
          <div class="item flex_center width_20">{{i.number}}</div>
        </div>
      </div>
    </div>

    <van-calendar v-model="datesShow" type="range" @confirm="onConfirm" :min-date="min_date" :default-date="dates" />
  </div>
</template>
<script>
import HomeHead from '@/components/HomeHead';

export default {
  components: {HomeHead},
  data () {
    return {
      min_date: new Date(2020, 0, 1),
      datesShow: false,
      dates: [],
      time_idx: 0,
      time_list: [],
      center_topst: {ele: [], water: []},
      area_alarm_st: [],
      alarm_list: [],
      alarm_total: 0,
      data_yoy_head: [],
      data_yoy_data: [],
      data_yoy_c: 'day',
    };
  },
  created() {
    let date = new Date()
    this.sendReq('/api/datav/report/time_list', 'get', {}, r => {
      this.time_list = r.list

      this.dates = [
        new Date(this.time_list[0].start * 1000),
        new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59)
      ]

      this.get_center_topst()
      this.get_area_alarm_st()
      this.get_alarm_list()
      this.get_data_yoy()
    })
  },
  methods: {
    data_yoy_c_change(v) {
      this.data_yoy_c = v
      this.get_data_yoy()
    },
    timeLabelChange(i, idx) {
      let date = new Date()
      this.time_idx = idx
      this.dates = [
        new Date(i.start * 1000),
        new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59)
      ]
      this.datesChange()
    },
    onConfirm(v) {
      this.datesShow = false;
      this.dates = v;
      this.datesChange()
    },
    datesChange() {
      this.get_center_topst()
      this.get_area_alarm_st()
      this.get_alarm_list()
      this.get_data_yoy()
    },
    // 近x天数据统计(左上)
    get_center_topst() {
      this.sendReq('/api/datav/fetch_water_electricity_stats/center_topst', 'get', {
        start_date: parseInt(this.dates[0].getTime() / 1000),
        end_date: parseInt(this.dates[1].getTime() / 1000),
      }, r => {
        this.center_topst = r
      })
    },
    // 近x天报警次数统计
    get_area_alarm_st() {
      this.sendReq('/api/datav/report/area_alarm_st', 'get', {
        start_date: parseInt(this.dates[0].getTime() / 1000),
        end_date: parseInt(this.dates[1].getTime() / 1000),
      }, r => {
        this.area_alarm_st = r
      })
    },
    // 近 x 天 数据统计 右下
    get_alarm_list() {
      this.sendReq('/api/datav/report/alarm_list', 'get', {
        start_date: parseInt(this.dates[0].getTime() / 1000),
        end_date: parseInt(this.dates[1].getTime() / 1000),
      }, r => {
        this.alarm_list = r.data
        this.alarm_total = r.total
      })
    },
    // 近 x 天 数据同比 左下
    get_data_yoy() {
      this.sendReq('/api/datav/report/data_yoy', 'get', {
        c: this.data_yoy_c,
        start_date: parseInt(this.dates[0].getTime() / 1000),
        end_date: parseInt(this.dates[1].getTime() / 1000),
      }, r => {
        this.data_yoy_head = r.header
        this.data_yoy_data = r.data
      })
    },
  }
};
</script>

<style lang="less" scoped>
.content {
  background: #13244C;
  box-sizing: border-box; 
  padding-bottom: 4vw;
}
table{
  border-collapse: collapse;
  th{
    background:rgba(25, 52, 88, 0.9);
    font-size:14px;
    color:#fff;
    white-space: nowrap;
    padding:3vw;
    border:none;
    text-align:center;
  }
  .tableBody tr:nth-child(even){
    background:rgba(25, 52, 88, 0.9);
  }
  td{
    color:rgba(255, 255, 255, 0.8);
    font-size:12px;
    white-space: nowrap;
    padding:3vw;
    text-align:center;
  }
}
.i_sort{
  display:block;
  width:14px;
  height:14px;
  margin-left:3px;
}
.i_sort.i_top{
  background: url(../../assets/i_top.png) no-repeat center center;
  background-size:100% 100%; 
}
.i_sort.i_down{
  background: url(../../assets/i_down.png) no-repeat center center;
  background-size:100% 100%; 
}
.selectTab{
  width:60vw;
  margin:5vw auto 2vw auto;
  .item{
    text-align:center;
    color:#fff;
    background:#193458;
    border:1px solid #128DEB;
    padding:8px 0;
    font-size:12px;
  }
  .item:last-child{
    margin-left:-1px;
  }
  .cur{
    background:#128DEB;
  }
}
.topTab{
  padding:3vw 0;
  .col{
    width:26.8vw;
    height:8vw;
    background: url(../../assets/checkBg.png) no-repeat center center;
    background-size:100% auto; 
    color:#fff;
    font-size:16px;
    margin:0 3vw;
  }
  .cur{
    background: url(../../assets/checkedBg.png) no-repeat center center;
    background-size:100% auto; 
  }
}
.calendarBox{
  width:92vw;
  margin:3vw auto 0 auto;
  color:#fff;
  background:#193458;
  border:1px solid #128DEB;
  padding:8px 0;
  font-size:12px;
}
.tabBox{
  width:92vw;
  margin:0 auto;
  .col{
    text-align:center;
    color:#fff;
    background:#193458;
    border:1px solid #128DEB;
    padding:8px 0;
    font-size:12px;
    margin-left:8px;
  }
  .cur{
    background:#128DEB;
  }
}
.normalBox{
  width:92vw;
  margin:4vw auto 0 auto;
  background: rgba(14, 34, 68, 0.5);
  box-shadow: -4px -4px 12px 0 #1f8dcd40 inset, 4px 4px 12px 0 #1f8dcd33 inset;
  position: relative;
  padding:4vw;
  box-sizing: border-box;
  .title{
    color:#128DEB;
    font-size:14px;
    min-width:40vw;
    padding:1vw 2vw;
    background: linear-gradient(90deg, #12376C 0.06%, #12376c00 100.04%);
    .inner{
      padding:0 3vw;
    }
  }
  .tit_bott{
    display: block;
    width:100%;
    margin:0.5vw auto;
  }
  .i_line{
    display: block;
    position: absolute;
    width:42vw;
    height:3px;
    background: url(../../assets/guang_line.png) no-repeat center center;
    background-size:100% auto; 
    left:50%;
    margin-left:-21vw;
    top:0;
  }
  .i_jiao{
    display: block;
    position: absolute;
    width:1.6vw;
    height:1.6vw;
  }
  .i_j_t_l{
    background: url(../../assets/i_j_t_l.png) no-repeat center center;
    background-size:100% auto; 
    top:0;
    left:0;
  }
  .i_j_t_r{
    background: url(../../assets/i_j_t_r.png) no-repeat center center;
    background-size:100% auto; 
    top:0;
    right:0;
  }
  .i_j_b_l{
    background: url(../../assets/i_j_b_l.png) no-repeat center center;
    background-size:100% auto; 
    bottom:0;
    left:0;
  }
  .i_j_b_r{
    background: url(../../assets/i_j_b_r.png) no-repeat center center;
    background-size:100% auto; 
    bottom:0;
    right:0;
  }
}
.totalData{
  padding:5px 0 0 0;
  margin-left:-5px;
  .item{
    width:150px;
    background: rgba(25, 52, 88, 0.9);
    padding:10px 5px;
    box-sizing: border-box;
    margin:5px;
    .i_item{
      margin-right:10px;
    }
    ._h3{
      font-size:16px;
      color:#fff;
      font-weight:600;
    }
    ._p{
      font-size:12px;
      color:rgba(243, 246, 250, 0.6);
    }
  }
}
.dataBox{
  .item{
    text-align: center;
    width:33.333%;
    padding:8px 0;
    ._h3{
      font-weight:600;
      font-size:16px;
      color:#FFFFFF;
      padding:2px 0;
    }
    ._p{
      font-size:12px;
      font-weight:normal;
      color:rgba(243, 246, 250, 0.6);
    }
  }
}
.recordList{
  margin-top:2vw;
  .col{
    background: rgba(25, 52, 88, 0.9);
    text-align: center;
    color:rgba(255, 255, 255, 0.8);
    font-size:12px;
    padding:3vw 0;
    box-sizing: border-box;
    .item{
      padding:0 3vw;
    }
    .width_14{
      width:14vw;
    }
    .width_20{
      width:20vw;
    }
  }
  .listTit{
    font-size:14px;
    font-weight:bold;
    color:#fff;
  }
  .col:nth-child(odd){
    background: rgba(15, 41, 75, 0);
  }
}
</style>
